'use client';

import { useState, useEffect } from 'react';
import { Box, Container, Typography, Paper, Divider, useTheme, alpha, Grid } from '@mui/material';
import StorageIcon from '@mui/icons-material/Storage';
import Navbar from '@/components/Navbar';
import { DatasetSearchBar } from '@/components/dataset-square/DatasetSearchBar';
import { DatasetSiteList } from '@/components/dataset-square/DatasetSiteList';
import { useTranslation } from 'react-i18next';
import DatasetCategories from '@/components/home/DatasetCategories';

export default function DatasetSquarePage() {
  const [projects, setProjects] = useState([]);
  const theme = useTheme();
  const { t } = useTranslation();

  // 获取项目列表和模型列表
  useEffect(() => {
    async function fetchData() {
      try {
        // 获取用户创建的项目详情
        const response = await fetch('/api/projects');
        if (response.ok) {
          const projectsData = await response.json();
          setProjects(projectsData);
        }
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    }

    fetchData();
  }, []);

  const cardTags = [
    // 第一行 1-4
    [
      { label: '热门推荐', color: 'rgba(123,104,238,1)', bg: 'rgba(123,104,238,0.3)' },
      { label: '多模态', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    [
      { label: '热门推荐', color: 'rgba(123,104,238,1)', bg: 'rgba(123,104,238,0.3)' },
      { label: '多模态', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    [
      { label: '热门推荐', color: 'rgba(123,104,238,1)', bg: 'rgba(123,104,238,0.3)' },
      { label: '多模态', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    [
      { label: '热门推荐', color: 'rgba(123,104,238,1)', bg: 'rgba(123,104,238,0.3)' },
      { label: '多模态', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    // 第二行 5-8
    [
      { label: '标签一', color: 'rgba(123,104,238,1)', bg: 'rgba(73,204,249,0.3)' },
      { label: '标签二', color: 'rgba(123,104,238,1)', bg: 'rgba(0,184,132,0.3)' },
      { label: '标签三', color: 'rgba(123,104,238,1)', bg: 'rgba(85,119,255,0.3)' },
    ],
    [
      { label: '标签一', color: 'rgba(123,104,238,1)', bg: 'rgba(73,204,249,0.3)' },
      { label: '标签二', color: 'rgba(123,104,238,1)', bg: 'rgba(0,184,132,0.3)' },
      { label: '标签三', color: 'rgba(123,104,238,1)', bg: 'rgba(85,119,255,0.3)' },
    ],
    [
      { label: '标签一', color: 'rgba(123,104,238,1)', bg: 'rgba(73,204,249,0.3)' },
      { label: '标签二', color: 'rgba(123,104,238,1)', bg: 'rgba(0,184,132,0.3)' },
      { label: '标签三', color: 'rgba(123,104,238,1)', bg: 'rgba(85,119,255,0.3)' },
    ],
    [
      { label: '标签一', color: 'rgba(123,104,238,1)', bg: 'rgba(73,204,249,0.3)' },
      { label: '标签二', color: 'rgba(123,104,238,1)', bg: 'rgba(0,184,132,0.3)' },
      { label: '标签三', color: 'rgba(123,104,238,1)', bg: 'rgba(85,119,255,0.3)' },
    ],
    // 第三行 9-12
    [
      { label: '标签四', color: 'rgba(253,113,175,1)', bg: 'rgba(253,113,175,0.3)' },
      { label: '标签五', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    [
      { label: '标签四', color: 'rgba(253,113,175,1)', bg: 'rgba(253,113,175,0.3)' },
      { label: '标签五', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    [
      { label: '标签四', color: 'rgba(253,113,175,1)', bg: 'rgba(253,113,175,0.3)' },
      { label: '标签五', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
    [
      { label: '标签四', color: 'rgba(253,113,175,1)', bg: 'rgba(253,113,175,0.3)' },
      { label: '标签五', color: 'rgba(0,184,132,1)', bg: 'rgba(0,184,132,0.3)' },
    ],
  ];

  return (
    <main>
      {/* 导航栏 */}
      <Navbar projects={projects} />
      {/* 静态导航栏 */}
      <Box sx={{ bgcolor: 'white', py: 2 }}>
        <Container maxWidth="xl">
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                fontWeight: 500
              }}
            >
              nav-seleced
            </Typography>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                opacity: 0.7
              }}
            >
              nav-default
            </Typography>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                opacity: 0.7
              }}
            >
              nav-default
            </Typography>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                opacity: 0.7
              }}
            >
              nav-default
            </Typography>
          </Box>
        </Container>
      </Box>

      {/* 头部区域 */}
      <Box
        sx={{
          position: 'relative',
          background: 'linear-gradient(135deg, #ff6b9d 0%, #c44569 25%, #6c5ce7 50%, #74b9ff 100%)',
          minHeight: '400px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
          '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            opacity: 0.3
          }
        }}
      >
        {/* 背景装饰 */}
        <Box
          sx={{
            position: 'absolute',
            top: -100,
            left: -100,
            width: 300,
            height: 300,
            borderRadius: '50%',
            background: `radial-gradient(circle, ${alpha(theme.palette.secondary.main, 0.2)} 0%, transparent 70%)`,
            filter: 'blur(40px)',
            zIndex: 0
          }}
        />
        <Box
          sx={{
            position: 'absolute',
            bottom: -80,
            right: -80,
            width: 350,
            height: 350,
            borderRadius: '50%',
            background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.15)} 0%, transparent 70%)`,
            filter: 'blur(30px)',
            zIndex: 0
          }}
        />
        <Box
          sx={{
            position: 'absolute',
            top: '40%',
            right: '10%',
            width: 100,
            height: 100,
            borderRadius: '50%',
            background: `radial-gradient(circle, ${alpha(theme.palette.secondary.light, 0.15)} 0%, transparent 70%)`,
            filter: 'blur(20px)',
            zIndex: 0
          }}
        />

        <Container maxWidth="xl" sx={{ height: '100%' }}>
          <Box sx={{ display: 'flex', flexDirection: 'column', height: '400px', justifyContent: 'space-between', alignItems: 'center' }}>
            <Box 
              sx={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                mb: 3,
                p: 5,
                borderRadius: '12px',
                position: 'relative',
                overflow: 'hidden'
              }}
            >
              <Box sx={{ textAlign: 'center', position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', mb: 0, justifyContent: 'center', mt: 6 }}>
                <img 
                  src="/img/data_squre.png" 
                  alt="数据广场"
                  style={{ width: 40, height: 40, marginRight: 12, zIndex: 2 }}
                />
                <Typography
                  variant="h2"
                  component="h1"
                  sx={{
                    fontWeight: 800,
                    color: 'white',
                    mb: 0,
                    letterSpacing: '-0.5px',
                    zIndex: 2,
                    fontSize: '40px'
                  }}
                >
                  数据广场
                </Typography>
              </Box>
              <Typography
                variant="h5"
                align="center"
                sx={{
                  maxWidth: 800,
                  mx: 'auto',
                  mb: 0,
                  mt: 0,
                  color: theme.palette.mode === 'dark' ? alpha('#FFFFFF', 0.9) : '#FFFFFF',
                  fontWeight: 400,
                  lineHeight: '70px',
                  textShadow: '0 1px 3px rgba(0,0,0,0.1)',
                  zIndex: 2,
                }}
              >
                发现和探索高质量数据集资源，助力您的模型训练和研究
              </Typography>
              <Box
                sx={{
                  maxWidth: 800,
                  mx: 'auto',
                  position: 'relative',
                  zIndex: 10,
                  mt: '8px'
                }}
              >
                <Paper
                  elevation={0}
                  sx={{
                    width: '100%',
                    background: 'transparent',
                    overflow: 'visible'
                  }}
                >
                  <DatasetSearchBar />
                </Paper>
              </Box>
            </Box>
          </Box>
        </Container>
      </Box>

      {/* 内容区域 */}
      <Box sx={{ bgcolor: 'white', py: 2 }}>
        <Container maxWidth="xl">
          <DatasetCategories />
        </Container>
      </Box>

      {/* 分类导航下方卡片区域 */}
      <Box sx={{ bgcolor: 'rgba(234,234,234,1)', py: 4 }}>
        <Container maxWidth="xl">
          <Grid container spacing={3}>
            {Array.from({ length: 12 }).map((_, idx) => (
              <Grid item xs={12} sm={6} md={3} key={idx}>
                <Box sx={{ bgcolor: 'white', borderRadius: '1px', boxShadow: 1, p: 3, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', height: 180 }}>
                  {/* 顶部标签 */}
                  <Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
                    {cardTags[idx].map(tag => (
                      <Box key={tag.label} sx={{ bgcolor: tag.bg, color: tag.color, fontSize: 12, fontWeight: 500, borderRadius: 2, px: 1.5, py: 0.5 }}>{tag.label}</Box>
                    ))}
                  </Box>
                  {/* 标题行 */}
                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                    <img src="/iocns/file.png" alt="file" style={{ width: 28, height: 28, marginRight: 8, filter: 'grayscale(1)' }} />
                    <Typography sx={{ fontSize: 18, color: '#888', fontWeight: 500, mr: 0.5 }}>hugging face</Typography>
                    <Typography sx={{ fontSize: 18, color: '#222', fontWeight: 700 }}>开源数据集</Typography>
                  </Box>
                  {/* 描述 */}
                  <Typography sx={{ fontSize: 14, color: '#888', lineHeight: 1.7 }}>
                    提供了丰富的开源数据集，涵盖多种领域和语言，支持自然语言处理、计算机视觉等多种任务。
                  </Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Box>
    </main>
  );
}
